<template>

	<view class="is_auth" style="background-image: url(https://cdnauth.dreamyuewen.com/images/is_auth_bg.png);">
		<u-navbar :autoBack="true" bgColor="rgba(0,0,0,0)" :fixed="true" @click-left="$back"></u-navbar>

		<view class="navs">
			<view class="top">实名认证</view>
			<view class="bottom">请上传身份证的正反面</view>
		</view>
		<view class="centers">
			<view class="left">
				<view class="top">头像面</view>
				<view class="bottom">上传您的身份证头像面</view>
			</view>
			<view class="right">

				<!-- #ifndef H5 -->
				<image :src="front_img  | formatImgUrl"
					:class="front_img=='https://cdnauth.dreamyuewen.com/images/man.png'?'':'img_act'"
					mode="" @click="new_phone('front')"></image>


				<!-- #endif -->
				<!-- #ifdef H5 -->
				<u-upload-card ref="uUploadCard" :uploadIcon="'/images/up.png' | formatImgUrl" borderRadius="0"
					maxCount="1" width="138" height="101" :action="uploadImgUrl" :fileList="[front_img]"
					@afterRead='afterRead'>
				</u-upload-card>
				<!-- #endif -->

			</view>
		</view>

		<view class="centers">
			<view class="left">
				<view class="top">国徽面</view>
				<view class="bottom">上传您的身份证国徽面</view>
			</view>
			<view class="right">

				<!-- 	<u-upload-card ref="uUploadCard2" :uploadIcon="'/images/up.png' | formatImgUrl" borderRadius="0" maxCount="1" width="138" height="101" :action="uploadImgUrl" :fileList="[back_img]" @afterRead='afterRead2'>
				</u-upload-card> -->

				<!-- #ifndef H5 -->
				<image :src="back_img  | formatImgUrl"
					:class="back_img=='https://cdnauth.dreamyuewen.com/images/man1.png'?'':'img_act'"
					mode="" @click="new_phone('side')"></image>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<u-upload-card ref="uUploadCard2" :uploadIcon="'/images/up.png' | formatImgUrl" borderRadius="0"
					maxCount="1" width="138" height="101" :action="uploadImgUrl" :fileList="[back_img]"
					@afterRead='afterRead2'>
				</u-upload-card>
				<!-- #endif -->
			</view>
		</view>

		<view class="ti" @click="next_auth1()">
			下一步
		</view>
		<view class="text">
			实名认证需要输入您的姓名和身份证号，并且采集面<br>
			部信息来确保头像、身份证都是本人。<br>

			每个身份证只能认证一个账号，详见<span class="zehngc" @click.stop="goToOtherxie(14)">《隐私政策》</span>


		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				front_img: "https://cdnauth.dreamyuewen.com/images/man.png",
				back_img: "https://cdnauth.dreamyuewen.com/images/man1.png"

			}
		},
		onShow() {
			this.getUserInfo()
			let front_img = uni.getStorageSync("front_img")
			if (front_img) {
				this.front_img = front_img
			}

			let side = uni.getStorageSync("side_img")
			if (side) {
				this.back_img = side
			}

		},
		onLoad() {
			uni.setStorageSync("front_img", null)
			uni.setStorageSync("side_img", null)
		},
		methods: {
			new_phone(type) {

				uni.navigateTo({
					url: '/pages/user/phone1?coverImageType=' + type
				})
			},
			// 新增图片
			async afterRead(event) {
				console.log(event, 111);

				const result = await this.uploadFilePromise(event.file_, 1)
			},
			async afterRead2(event) {
				console.log(event, 111);

				const result = await this.uploadFilePromise(event.file_, 2)
			},
			uploadFilePromise(url, type) {
				return new Promise((resolve, reject) => {

					let a = uni.uploadFile({
						url: this.uploadImgUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							if (type == 1) {
								this.$refs.uUploadCard.updateAvatar([datas.url])
								this.front_img = datas.url
							} else {
								this.$refs.uUploadCard2.updateAvatar([datas.url])
								this.back_img = datas.url
							}


							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			next_auth1() {
				if (this.front_img == "https://cdnauth.dreamyuewen.com/images/man.png") {
					uni.showToast({
						title: "请上传身份证正面",
						icon: 'none',
						mask: true
					})
					return;
				}
				if (this.back_img == "https://cdnauth.dreamyuewen.com/images/man1.png") {
					uni.showToast({
						title: "请上传身份证反面",
						icon: 'none',
						mask: true
					})
					return;
				}
							console.log("satrt1")
							
							
					this.$api.default.request('user/idcard', {
						back_img: this.back_img,
						front_img: this.front_img
					}).then((res) => {
						if (res.code) {
							// this.$common.errorToShow(res.msg)
							uni.setStorageSync('card_msg', res.data);
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/user/auth1'
								})
							}, 1000);
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
			
		

			},
			onChooseImg(type) {
				let _this = this;
				this.$common.chooseImage({}, (data) => {
					if (data) {
						if (type == "front_img") {
							_this.front_img = data;
						} else {
							_this.back_img = data;
						}
					}
				}, 1)
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.saveUser({
					'sex': this.index
				})
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo').then((res) => {
					if (res.code) {
						this.userInfo = res.user
						this.index = res.user.sex ? res.user.sex : 0
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.is_auth {
		height: 100vh;
		background-size: 100%;
		padding-top: 100px;
		box-sizing: border-box;

		.navs {
			float: left;
			width: 86%;
			margin-left: 7%;

			.top {
				padding-top: 60rpx;
				font-size: 40rpx;
				font-weight: 700;
			}

			.bottom {
				font-family: Source Han Sans CN;
				font-size: 24rpx;
				color: #999999;
				margin-top: 5px;
			}
		}

		.centers {
			margin-top: 15px;
			float: left;
			background: #fff;
			width: 84%;
			border-radius: 0.5em;
			margin-left: 8%;

			.left {
				margin-left: 20rpx;
				float: left;

				.top {
					padding-top: 30rpx;
					font-size: 34rpx;
					font-weight: 700;
				}

				.bottom {
					font-family: Source Han Sans CN;
					font-size: 24rpx;
					color: #999999;
					margin-top: 5px;
				}
			}

			.right {
				margin-top: 30rpx;
				float: right;
				margin-right: 20rpx;

				image {
					margin-top: 10px;
					width: 138px;
					height: 101px;
				}

				.img_act {
					transform: rotate(-90deg);
					height: 138px;
					width: 101px;
					margin-right: 35rpx;
					border-radius: 0.5em
				}

				padding-bottom: 40rpx;
			}
		}

		.ti {


			float: left;
			width: 84%;

			height: 86rpx;
			border-radius: 8px;
			line-height: 86rpx;

			margin-left: 8%;
			margin-top: 20px;
			opacity: 1;
			background: #45C4B0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #FFFFFF;
		}

		.text {
			float: left;
			width: 82%;
			margin-left: 9%;
			margin-top: 10px;
			color: #999;
			font-size: 10px;

			.zehngc {
				color: #45C4B0;
			}
		}
	}
</style>